<template>
  <div id="table">
    <div>
      <el-table
        ref="multipleTable"
        :data="$store.state.CartTable"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        show-summary="false"
        summary-method="computeSum"
      >
        <el-table-column type="selection" width="55" > </el-table-column>
        <el-table-column label="商品信息" width="600">
          <template slot-scope="scope">
            <div style="float: left">
              <img :src="scope.row.imgurl" width="100" height="100" />
            </div>
            <div style="float: left; margin-top: 40px; margin-left: 40px">
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="80">
        </el-table-column>
        <el-table-column label="数量" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            <div style="float: left" @click="add(scope.$index)">
              <i class="el-icon-circle-plus-outline"></i>
            </div>
            <div style="float: left">
              <span>{{ scope.row.num }}</span>
            </div>
            <div style="float: left" @click="reduce(scope.$index)">
              <i class="el-icon-remove-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smallSum" label="小计" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operation" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <div style="float: left">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <div style="float: right;margin-right: 100px;">
        <el-button @click="handleSubmit">订单结算</el-button>
      </div>
      <div style="float: right;margin-right: 200px;margin-top: 20px;">
        <span>应付总额：{{total}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      total:0
    };
  },
  methods: {
    //减少商品数量，此时并未向后端发起请求
    reduce(index) {
      if (this.tableData[index].num > 0) {
        this.tableData[index].num--;
        this.tableData[index].smallSum -= this.tableData[index].price;
      } else {
        this.$alert("商品数量不能为负数", "操作错误", {
          confirmButtonText: "确定",
        });
      }
    },
    //增加商品数量，未向后端请求
    add(index) {
      this.tableData[index].num++;
      this.tableData[index].smallSum += this.tableData[index].price;
    },
    computedSamllSum() {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].smallSum =
          this.tableData[i].price * this.tableData[i].num;
      }
      console.log("小计成功");
    },
    //取消选择
    toggleSelection(rows) {
      console.log("toggleSelection");
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //价格总计
    handleSelectionChange(val) {
      this.total = 0;
      for(var i=0;i<val.length;i++){
        this.total = this.total+val[i].smallSum;
      }
      this.$store.commit("saveTotal",this.total);
      this.multipleSelection = val;
    },
    //删除商品,向后端发起请求，调用接口删除商品
    handleDelete(index) {
      var cartId = this.$store.state.CartTable[index].carid;
      this.data.deleteCar(cartId);
    },
    //订单结算
    //http://202.193.52.12:8080/order/addCastOrder?userId=[userId]&cartList=[cartList]
    handleSubmit() {
      console.log("Cart----handleSubmit");
      var cartList = [];
      var val = this.multipleSelection;
      for(var i = 0;i<val.length;i++){
        var carid = val[i].carid;
        cartList.push(carid);
      }
      cartList = cartList.join(",");
      axios.get('/order/addCastOrder',{
        params:{
          userId:this.$store.state.clientId,
          cartList:cartList
        }
      }).then((response)=>{
        this.data.getCar();
        this.data.getTable();
      }).catch((error)=>{
        //console.log(error);
      });
    }
  },
  mounted() {
    this.data.getTable();
    this.$refs.multipleTable.toggleAllSelection();
  },
};
</script>
<style scoped>
#table {
  margin-top: 50px;
  /* margin-left: 150px;
  margin-right: 150px; */
}
</style>